<template>
  <div class="style-settings">
    <el-form label-width="80px" size="small" v-if="currentComponent">
      <el-form-item label="宽度">
        <el-input-number v-model="localStyle.width" :min="0" :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="高度">
        <el-input-number v-model="localStyle.height" :min="0" :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="横坐标">
        <el-input-number v-model="localStyle.x" :min="0" :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="纵坐标">
        <el-input-number v-model="localStyle.y" :min="0" :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number v-model="localStyle.fontSize" :min="8" :max="72"></el-input-number>
      </el-form-item>
      <el-form-item label="加粗">
        <el-checkbox v-model="localStyle.fontWeight"></el-checkbox>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker v-model="localStyle.fontColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="边框颜色">
        <el-color-picker v-model="localStyle.borderColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="对齐方式">
        <el-radio-group v-model="localStyle.textAlign">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="center">居中</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
        </el-radio-group>
      </el-form-item>
      
      <!-- 条码特有设置 -->
      <template v-if="currentComponent.type === 'barcode'">
        <el-form-item label="条码类型">
          <el-select v-model="localStyle.barcodeType" placeholder="请选择条码类型">
            <el-option label="Code128" value="Code128"></el-option>
            <el-option label="Code39" value="Code39"></el-option>
            <el-option label="EAN13" value="EAN13"></el-option>
            <el-option label="QRCode" value="QRCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="条码高度">
          <el-input-number v-model="localStyle.barcodeHeight" :min="10" :max="100"></el-input-number>
        </el-form-item>
      </template>
    </el-form>
    <div v-else class="empty-tip">请选择一个组件进行样式设置</div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    currentComponent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      localStyle: { ...this.value }
    };
  },
  watch: {
    localStyle: {
      deep: true,
      handler(newVal) {
        this.$emit('input', newVal);
        this.$emit('change', newVal);
      }
    },
    value: {
      immediate: true,
      handler(newVal) {
        this.localStyle = { ...newVal };
      }
    },
    currentComponent: {
      immediate: true,
      handler(newComp) {
        if (newComp) {
          this.localStyle = { ...newComp.styles };
        }
      }
    }
  }
};
</script>